import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux, Link } from 'dva/router';
import {
  Form,
  Input,
  DatePicker,
  Select,
  Button,
  Card,
  InputNumber,
  Checkbox,
  Radio,
  Icon,
  Tooltip,
} from 'antd';
const RadioGroup = Radio.Group;

import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './style.less';

const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;

@connect(({ gameList, baoming, loading }) => ({
  baoming,
  gameList,
  submitting: loading.effects['baoming/addSingInfo'],
}))
@Form.create()
export default class SignUpForm extends PureComponent {
  componentDidMount() {
    this.props.dispatch({
      type: 'gameList/fetch',
      payload: {
        status: 'SIGN',
        isPublic: true,
      },
    });
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        //console.log(values);
        this.props.dispatch({
          type: 'baoming/addSingInfo',
          payload: values,
        });
      }
    });
  };
  render() {
    const { submitting } = this.props;
    const { getFieldDecorator, getFieldValue } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    const options = this.props.gameList.list.map(d => <Option key={d.id}>{d.title}</Option>);
    //console.log(options);

    return (
      <PageHeaderLayout title="报名">
        <Card bordered={false}>
          <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
            <FormItem {...formItemLayout} label="比赛名称">
              {getFieldDecorator('gameId', {
                rules: [
                  {
                    required: true,
                    message: '请输入姓名',
                  },
                ],
              })(<Select>{options}</Select>)}
            </FormItem>
            <FormItem {...formItemLayout} label="姓名">
              {getFieldDecorator('uname', {
                rules: [
                  {
                    required: true,
                    message: '请输入姓名',
                  },
                ],
              })(<Input placeholder="姓名" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="报名组别">
              {getFieldDecorator('project', {
                rules: [
                  {
                    required: true,
                    message: '请选择组别',
                  },
                ],
              })(
                <Checkbox.Group style={{ width: '100%' }}>
                  <Checkbox value="MS">男单</Checkbox>
                  <Checkbox value="FS">女单</Checkbox>
                  <Checkbox value="MD">男双</Checkbox>
                  <Checkbox value="FD">女双</Checkbox>
                  <Checkbox value="HD">混双</Checkbox>
                </Checkbox.Group>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="报名项目">
              {getFieldDecorator('zubie', {
                rules: [
                  {
                    required: true,
                    message: '请选择比赛项目',
                  },
                ],
              })(
                <RadioGroup>
                  <Radio value="ZA">专业A组</Radio>
                  <Radio value="ZB">专业B组</Radio>
                  <Radio value="YA">业余A组</Radio>
                  <Radio value="YB">业余B组</Radio>
                  <Radio value="YC">业余C组</Radio>
                </RadioGroup>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="服装尺寸">
              {getFieldDecorator('shirtSize', {
                rules: [
                  {
                    required: true,
                    message: '请选择服装尺寸',
                  },
                ],
              })(
                <RadioGroup>
                  <Radio value="XXL">XXL</Radio>
                  <Radio value="XL">XL</Radio>
                  <Radio value="L">L</Radio>
                  <Radio value="M">M</Radio>
                  <Radio value="S">S</Radio>
                </RadioGroup>
              )}
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={submitting}>
                提交
              </Button>
              <Button style={{ marginLeft: 8 }}>取消</Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}
